<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4548444_fcozuirxcjc.css">
    <link rel="stylesheet" href="./index2.css">
    <style>
 * { 
     margin: 0; 
     padding: 0; 
     border: none; 
     font-family: '楷体';
 }
 ul,ol {
    list-style: none;
}

.container {
  position: relative;
  width: 812px;
  height: 375px;
  overflow: hidden;
  margin: 0 auto;
}
.container-wrapper {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 4872px;
  height: 375px;
}
.img {
  width: 812px;
  height: 375px;
}
.img img {
  width: 100%;
  height: 100%;
}
.container-control .prev {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.container-control .next1 {
  position: absolute;
  top: 50%;
  right:5px;
  transform: translateY(-50%);
}
.container-control span {
  cursor: pointer;
 font-size: 50px;
 color: aliceblue;
}
.container-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.dot {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #ccc;
}
.dot.active {
  background-color: #f00;
}
.top-nav li a {
  font-size: 25px;
}
html,body {
  background-image: url(https://p.qqan.com/up/2020-10/16030984182548078.jpg) ;
} 
.top-nav {
   background-color: rgba(100, 148, 237, 0.283);
}
    </style>
</head>
<body>
  <div class="top-nav">
    <ul>
        <li><a href="./js任务一.html">首页</a></li>
        <li><a href="./待办列表.html">待办列表</a></li>
        <li><a href="https://gitee.com/zxzdkj/web-homework.git">代码仓库</a></li>
    </ul>
</div>
    <div class="container">
        <ul class="container-wrapper">
          <li class="img"><img src="./轮播图一.jpg"></li>
          <li class="img"><img src="./轮播图二.jpg"></li>
          <li class="img"><img src="./轮播图三.jpg"></li>
          <li class="img"><img src="./轮播图四.jpg"></li>
          <li class="img"><img src="./轮播图五.jpg"></li>
        </ul>
        <div class="container-control">
          <span class="prev iconfont icon-zuoqiehuan"></span>
          <span class="next1 iconfont icon-youqiehuan"></span>
        </div>
        <ul class="container-pagination">
          <li class="dot active"></li>
          <li class="dot"></li>
          <li class="dot"></li>
          <li class="dot"></li>
          <li class="dot"></li>
        </ul>
      </div>
      <script>
           const container = document.querySelector('.container'); 
           const containerWrapper = document.querySelector('.container-wrapper')
           const imgList = container.querySelectorAll('.img img');
           const prevBtn = document.querySelector('.prev');
           const next1Btn = document.querySelector('.next1');
           const dots = container.querySelectorAll('.dot');
           let currentIndex = 0;
           let timer = null;
      
        function updatePosition(index) {
            containerWrapper.style.left = -(index * 812) + 'px'; 
         }

        function changeImg(index) {
            if (index < 0 || index >= imgList.length) {
            return;
         }

        imgList.forEach((img, i) => {
            img.classList.remove('active');
            dots[i].classList.remove('active');
         });

        imgList[index].classList.add('active');
        dots[index].classList.add('active');

        currentIndex = index;
        updatePosition(index);
        }

        function autoPlay() {
        timer = setInterval(() => {
          let index = currentIndex + 1;
          if (index >= imgList.length) {
         index = 0;
        }
        changeImg(index);
        }, 2000);
      }

       function stopPlay() {
        clearInterval(timer);
        timer = null; 
      }

      function initCarousel() {
        changeImg(currentIndex);

      container.addEventListener('mouseover', stopPlay);
      container.addEventListener('mouseout', () => {
          if (timer === null) {
             autoPlay();
      }
    });
    prevBtn.addEventListener('click', () => {
      let index = (currentIndex - 1 + imgList.length) % imgList.length; 
      changeImg(index);
    });
    next1Btn.addEventListener('click', () => {
      let index = (currentIndex + 1) % imgList.length; 
      changeImg(index);
    });
    dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      changeImg(index);
    });
  });

  autoPlay();
}

initCarousel();
      </script>
      
</body>
</html>